<template>
    <div class="tags">
        <el-tag  @click="chageMenu(tag)" v-for="(tag,index) in tags" :key="index" :closable="tag.name !=='home'" :disable-transitions="false" :effect="$route.name == tag.name ? 'dark':'plain'" @close="handleClose(tag,index)">{{ tag.label }}</el-tag>
    </div>
  
</template>


<script setup>
import { useAside } from '@/store/index.js';
const main =useAside()
import { useRouter,useRoute } from 'vue-router';
const router=useRouter()
// 路由
const route=useRoute()
const tags=main.tabList

//  跳转
const chageMenu =(item)=>{
    router.push({name:item.name})
}

// 删除
const handleCloseTab=(val)=>{
    main.closeTab(val)
}

const handleClose=(tag,index)=>{
    const length =tags.length - 1
    handleCloseTab(tag)
    // 判断
    if(tag.name !== route.name){
        return
    }
    if(index === length){
        router.push({
            name:tags[index-1].name
        })
    }else{
        router.push({
            name:tags[index].name
        })
    }
}

</script>